import React, { RefObject, useEffect, useRef } from 'react'
import { Iprops } from '../../type/type'
import * as echarts from 'echarts'
import { echartsResize } from '../../util'

export const LineChart: React.FC<Iprops> = (props: any) => {
  const chartRef: any = useRef()

  useEffect(() => {
    const chart = echarts.init(chartRef.current) //echart初始化容器
    let option = {
      //配置项(数据都来自于props)
      title: {
        text: props.title ? props.title : '暂无数据',
      },
      xAxis: {
        type: 'category',
        data: props.xData,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: props.seriesData,
          type: 'line', // 折线图
        },
      ],
    }

    chart.setOption(option)
    echartsResize(chart)
  }, [props])

  return (
    <>
      <div ref={chartRef} className="chart"></div>
    </>
  )
}
